<template>
  <div class="home">
    <el-table :data="tableData" style="width: 100%" @selection-change="change">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
    <!-- <p>{{num}}</p>
    <p>{{number}}</p>
    <button @click="add">++</button>
    <my-button></my-button> -->
    <el-button type="danger" @click="delect">删除所选</el-button>
  </div>
</template>

<script setup>
// @ is an alias to /src
import { ref,reactive,toRefs } from "vue";
import MyButton from '../components/myButton.vue';
let num = ref(10);
const data = reactive({
  number: 200
})
const add = () => {
  num.value++
  data.number++
  // console.log(num);
}
const { number } = toRefs(data);
let arr = [];
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const change = (val) => {
  arr = val
}
const delect = () => {
  //  arr.forEach(item => {
  //    let index = tableData.findIndex(n => n.date == item.date);
  //     tableData.splice(index,1);
  //  })
  //  console.log(tableData);
  let arr1 = tableData.filter(item => !arr.some(n => n.date == item.date))
  console.log(arr1);
}
</script>
